<template>
	<div id="example-1" class="row w-100">
		<div id="topo_pic" class="col-8 ">
			<div class="w-100 ms-2 d-flex justify-content-center">
				<img class="rounded m-auto" id="image" ref="image" usemap="#topodetail" :src="$store.state.topoMapURL" alt="linux" />
				<map name="topodetail">
					<!-- <area :class="{area_style : device.show}" @click="get_deviceConfig(device)" v-for="device in deviceList" :key="device.name" -->
					<!-- <area class="area_style" @click="get_deviceConfig(device)" v-for="device in deviceList" :key="device.name" :coords="device.position" -->
					<!-- <area @mouseover="mouseover_area($event)" @click="get_deviceConfig(device)" v-for="device in deviceList" :key="device.name" -->
					<area @click="click_device(device)" v-for="device in deviceList" :key="device.name" :coords="device.position" shape="react" />
				</map>
			</div>
			<div class=" bg-light ">
				<div class="   d-flex justify-content-center align-items-center">
					<div class="text-info text-center font-weight-bold  ">topology infomation</div>
					<!-- <div class='  ms-2 text-secondary font-weight-bold'>{{ topo_name }}</div> -->
				</div>
				<pre class="text-muted topo_info ">{{ topo_info }}</pre>
			</div>
		</div>

		<div class="col-4 bg-light sticky-top ">
			<pre>
      {{ device_config }}
      </pre
			>
			<!-- <div class='form-group mx-1'>
        <textarea v-model="device_config" id='data' class='form-control' form='upload'></textarea>
      </div> -->
		</div>

		<dir class="device_marker01" v-show="device_marker01Show" style="position: absolute;" :style="{ top: cover_top, left: cover_left, width: cover_width, height: cover_height }"></dir>
		<dir ref="marker" class="device_marker" v-show="device_markerShow" style="position: absolute;" :style="{ top: cover_top, left: cover_left, width: cover_width, height: cover_height }"></dir>
		<div>{{ image_naturalWidth }}</div>
		<!-- <div>{{ device_config }}</div> -->
	</div>
</template>
<script>
	import http from '@/utils/Http';
	import SlideUpDown from 'vue-slide-up-down';
	import imageMapResize from 'image-map-resizer';
	export default {
		components: {
			SlideUpDown,
			imageMapResize,
		},
		methods: {
			update_topoInfo: function() {
				http({
					url: this.$store.state.topoInfoURL,
				})
					.then((res) => {
						this.topo_info = res.data;
					})
					.catch((err) => {
						console.log(err);
					});
			},
			////////////////////////////////////////////////////////
			click_device: function(device) {
				var areas = device.position.split(',');
				this.cover_top = Number(areas[1]) + Number(this.$refs.image.offsetTop) + 'px';
				this.cover_left = Number(areas[0]) + Number(this.$refs.image.offsetLeft) + 'px';
				this.cover_width = areas[2] - areas[0] + 'px';
				this.cover_height = areas[3] - areas[1] + 'px';
				this.device_markerShow = true;
				this.device_marker01Show = true;
				this.$refs.marker.onanimationend = () => (this.device_markerShow = false);
				http({
					url: device.config_file,
				})
					.then((res) => {
						this.device_config = res.data;
					})
					.catch((err) => {
						console.log(err);
					});
			},
			update_topo: function(id) {
				http({
					url: '/topo/api/' + id,
				})
					.then((res) => {
						this.topo = res.data;
						this.$store.commit('update_topoInfoURL', res.data.name);
						this.$store.commit('update_topoMapURL', res.data.name);
						this.update_topoInfo();
					})
					.catch((err) => {
						console.log(err);
					});
			},
			update_deviceList: function(id) {
				http({
					url: '/topo/device/api/related_list/' + id,
				})
					.then((res) => {
						this.deviceList = res.data;
					})
					.catch((err) => {
						console.log(err);
					});
			},
			resize_map: function scaleImageMap(name = 'topodetail', deviceList = this.deviceList) {
				function resizeMap() {
					function resizeAreaTag(cachedAreaCoords, idx) {
						function scale(coord) {
							var dimension = 1 === (isWidth = 1 - isWidth) ? 'width' : 'height';
							return padding[dimension] + Math.floor(Number(coord) * scalingFactor[dimension]);
						}

						var isWidth = 0;
						// console.log(areas)
						// areas[idx].coords = cachedAreaCoords
						areas[idx].position = cachedAreaCoords
							.split(',')
							.map(scale)
							.join(',');
						// console.log(areas)
					}

					var scalingFactor = {
						width: image.width / image.naturalWidth,
						height: image.height / image.naturalHeight,
					};

					var padding = {
						width: parseInt(window.getComputedStyle(image, null).getPropertyValue('padding-left'), 10),
						height: parseInt(window.getComputedStyle(image, null).getPropertyValue('padding-top'), 10),
					};

					// console.log("width: " + image.width)
					// console.log("natural width: " + image.naturalWidth)
					// console.log(cachedAreaCoordsArray)
					// console.log(areas)
					cachedAreaCoordsArray.forEach(resizeAreaTag);
					// console.log(areas)
					// console.log(cachedAreaCoordsArray)
				}

				function getCoords(e) {
					//Normalize coord-string to csv format without any space chars
					// return e.coords.replace(/ *, */g, ',').replace(/ +/g, ',')
					return e.position.replace(/ *, */g, ',').replace(/ +/g, ',');
				}

				function debounce() {
					clearTimeout(timer);
					timer = setTimeout(resizeMap, 250);
				}

				function start() {
					if (image.width !== image.naturalWidth || image.height !== image.naturalHeight) {
						resizeMap();
					}
				}

				function addEventListeners() {
					image.addEventListener('load', resizeMap, false); //Detect late image loads in IE11
					window.addEventListener('focus', resizeMap, false); //Cope with window being resized whilst on another tab
					window.addEventListener('resize', debounce, false);
					window.addEventListener('readystatechange', resizeMap, false);
					document.addEventListener('fullscreenchange', resizeMap, false);
				}

				function beenHere() {
					return 'function' === typeof map._resize;
				}

				function getImg() {
					return document.querySelector('img[usemap="#' + name + '"]');
				}

				function setup() {
					cachedAreaCoordsArray = Array.prototype.map.call(areas, getCoords);
					// console.log(cachedAreaCoordsArray)
					image = getImg('#' + map.name) || getImg(map.name);
					map._resize = resizeMap; //Bind resize method to HTML map element
				}

				var /*jshint validthis:true */
					map = this,
					// areas = null,
					areas = deviceList,
					cachedAreaCoordsArray = null,
					image = null,
					timer = null;

				if (!beenHere()) {
					setup();
					addEventListeners();
					// console.log('before area: ')
					// console.log(areas)
					start();
					// console.log('after area: ')
					// console.log(areas)
				} else {
					map._resize(); //Already setup, so just resize map
				}
			},
		},
		data() {
			return {
				topo: [],
				topo_info: '',
				deviceList: '',
				image_clientWidth: '',
				image_naturalWidth: '',
				device_config: '',
				cover_top: '',
				cover_left: '',
				cover_width: '',
				cover_height: '',
				device_markerShow: false,
				device_marker01Show: false,
				// radio: {},
			};
		},
		created() {},
		watch: {
			deviceList: {
				handler: function() {
					this.resize_map();
					this.image_clientWidth = this.$refs.image.clientWidth;
					this.image_naturalWidth = this.$refs.image.naturalWidth;
					// this.radio = {
					//   w_radio: this.$refs.image.clientWidth / this.$refs.image.naturalWidth,
					//   h_radio: this.$refs.image.clientHeight / this.$refs.image.naturalHeight
					// }
					// console.log(this.radio)
				},
			},
		},
		computed: {},
		mounted() {
			this.update_topo(this.$route.params.id);
			this.update_deviceList(this.$route.params.id);
		},
	};
</script>

<style scoped>
	img {
		max-width: 100%;
		max-height: auto;
	}

	.area_style {
		border-style: solid;
		border-color: #98bf21;
	}

	area:hover {
		opacity: 0.3;
	}

	.device_marker01 {
		box-sizing: border-box;
		border-style: dashed;
		border-color: #d21cff;
		border-radius: 20%;
		transform: scale(1.3);
		z-index: 9999;
	}

	.device_marker {
		/* left: 100px;
    width: 100px;
    top: 150px;
    height: 200px; */
		/* bottom: 880px; */
		/* opacity: 0.1; */
		/* background-color: yellow; */
		/* box-sizing: border-box; */
		box-sizing: border-box;
		border-style: solid;
		border-color: #d21cff;
		border-radius: 40%;
		/* animation: clickEffect 0.4s ease-out; */
		animation: ripple-effect 0.3s linear;
		z-index: 99999;
	}

	@keyframes ripple-effect {
		0% {
			opacity: 0.9;
			transform: scale(5);
		}

		100% {
			border-style: dashed;
			border-color: #d21cff;
			transform: scale(1.3);
			opacity: 0.01;
		}
	}
</style>
